<!-- HTML5 Playground
File:	multimedia.html
Author: Nagendra U M
 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link href="../theme/css/main.css" type="text/css" rel="stylesheet">
	<link href="../theme/css/multimedia.css" type="text/css" rel="stylesheet">
	<script src="../js/thirdparty/modernizr.min.js" type="text/javascript"></script>
	<script src="../js/thirdparty/jquery-1.7.2.min.js"></script>
	<script src="../js/multimedia.js" type="text/javascript" ></script>
	<title>HTML5 Playground - Nagendra U M - Graphics/Multimedia Demo</title>
</head>
<body>
	<header class="main-header">
		<hgroup>
			<table style="width: 100%">
				<tr>
					<td style="width: 15%;"><img src="../theme/images/html5logo.png"></td>
					<td style="width: 85%; text-align: center;">
						<h1>HTML5 Playground</h1>
						<h3>Graphics/Multimedia Features</h3>
					</td>
				</tr>
			</table>
		</hgroup>
	</header>
	<nav>
		<ul>
			<li><a href="storage.html">Offline/Storage</a></li>
			<li><a href="communication.html">Realtime/Communication</a></li>
			<li><a href="hardware.html">File/Hardware Access</a></li>
			<li><a href="semantics.html">Semantics and Markup</a></li>
			<li><a href="multimedia.html">Graphics/Multimedia</a></li>
			<li><a href="misc.html">Misc.</a></li>
		</ul>
	</nav>
	<section id="canvas">
		<article id="geometricCanvas">
			<header>
				<h2 style="text-align: center;">Canvas API Demo</h2>
			</header>
			<table class="full-width-table">
				<tr>
					<td>
						<canvas id="html5canvas">HTML5 Canvas not supported by this browser</canvas>
					</td>
					<td style="vertical-align: top;">
						<hr/>
						<label for="rectWidth">Width:</label>
						<input type="number" id="rectWidth" title="width" size="3" maxlength="3"/>
						<br/>
						<label for="rectHeight">Height:</label>
						<input type="number" id="rectHeight" title="height" size="3" maxlength="3"/>
						<br/>
						<input type="button" onclick="drawRectangle()" value="Draw Rectangle" class = "styled-button"/>
						<br/>
						<label for="rectColorSlider">Change Rectangle Color:</label>
						<input type="range" id="rectColorSlider" min="0" max="20000" step="100" onchange="drawRectangle()"/>
						<br/>
						<label for="rectGradient">I want to add a gradient:</label>
						<input type="checkbox" id="rectGradient" title="gradient" onclick="drawRectangle()"/>
						<hr/>
						
						<input type="button" onclick="drawCubicBezierCurve()" value="Draw Cubic Bezier Curve" class = "styled-button"/>
						<hr/>
						
						<label for="canvasText">Enter some text:</label>
						<input type="text" id="canvasText" title="canvasText" size="15" maxlength="15" />
						<input type="button" onclick="drawText()" value="Draw Text" class = "styled-button"/>
						<hr/>
						
						<label for="canvasRotateAngle">Rotation Angle: </label>
						<input type="number" id="canvasRotateAngle" max="180" min="1" size="3" />
						<input type="button" onclick="rotateCanvas()" value="Rotate Canvas" class = "styled-button"/>
						<hr/>
						
						<input type="button" onclick="exportCanvas()" value="Export Canvas as PNG Image" class = "styled-button"/>
					</td>	
				</tr>
			</table>
		</article>
	</section>
	<section id="multimedia">
		<table class="full-width-table">
			<tr>
				<td>
					<article id="video">
						<header>
							<h2>Video Streaming</h2>
						</header>
						<video id="html5video" width="640" height="360" controls="controls" ondblclick="fullscreenVideo()" preload="none">
							<!-- src your video file here -->
							<source src="../media/cisco_collab_rap.mp4" type="video/mp4"/>
							Your browser does not support HTML5 video.
						</video>
					</article>
				</td>
				<td style="vertical-align: top;">
					<article id="audio">
						<header>
							<h2>Audio Streaming</h2>
						</header>
						<audio src="../media/furelise.mp3" controls="controls" preload="none">Your browser does not support HTML5 audio.</audio>
					</article>
				</td>
			</tr>
		</table>
	</section>
	<footer>
		<p>&#169; 2012 <a href="http://gplus.to/umnagendra">Nagendra U M</a></p>
		<img alt="Powered by HTML5" src="../theme/images/html5badge.png" title="Powered by HTML5">
	</footer>
</body>
</html>